<template>
    <div class="contioner">
        <div class="search-form divClass" v-show="headerShow">

            <div class="my-tool-bar" style="margin: 5px;width: 100%;text-align: right;">
                <a-space>
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                    <el-button pain @click="emit('takebiaoji', 0)" plain>返回主页</el-button>
                </a-space>
            </div>
        </div>
        <!-- <div class="my-divisders">
            <a-divider orientation="center">
                <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
            </a-divider>
        </div> -->

        <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
        <div :style="{ height: '28%', padding: '10px' }">
            <div style="width: 100%; height: 100%">
                  <AgGridVuesCopys :suppressCopyRowsToClipboard="true" rowSelection="multiple" @grid-ready="gridReady" style="height:100%" :headerHeight="35"
                    :rowHeight="35" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="tableDataList"
                    :columnDefs="tc">
                </AgGridVuesCopys>
            </div>
        </div>
        <div :style="{ height: '60%', padding: '10px', width: '100%' }">
            <div ref="myChart" :style="{ width: '100%', height: '100%' }"></div>
        </div>
    </div>
</template>
    
<script lang="ts" setup>

import * as echarts from 'echarts'

import { Message } from '@arco-design/web-vue'
import { ref, reactive, onMounted, watch } from 'vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
// 引入element提示
//引入封装post
import { post, get } from '@/api/http'
import { Search, EditPen } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
const emit = defineEmits(['takebiaoji'])
const headerShow = ref<boolean>(true)


const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '厂区', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
})
const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    query.planOrderCode = corporateId
}

interface Querin {
    beginDate: any
    enginDate: any
    planOrderCode: any
}
//getlist初始化接口参数
let query = reactive<Querin>({
    beginDate: dayjs().format('YYYY-MM-DD'), //当月日期
    enginDate: formatDateTime(new Date(Number(new Date().getTime()) + (60 * 1000 * 60 * 24 * 7)), 'yyyy-MM-dd'), //当月日期
    planOrderCode: 32,
})
function formatDateTime(date: any, format: any) {
    const o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
        'H+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        S: date.getMilliseconds(), // 毫秒
        a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
        A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    };
    if (/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
        if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
            );
        }
    }
    return format;
}

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
}
const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1
}

const tc = [
    {
        headerName: '日期',
        field: 'recordDate',
        width: 150,
        pinned: 'left'
    },
    {
        headerName: '计划WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryPlanWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryPlanNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '生产WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryProductionWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryProductionNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '查布WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryCheckWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryCheckNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '修补WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryRepairWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryRepairNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '待入仓WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryWarehouseWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryWarehouseNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '库存WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryInventoryWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryInventoryNumber',
                width: 100
            }
        ]
    },
    {
        headerName: '总WIP',
        children: [
            {
                headerName: '重量',
                field: 'factoryAllWeight',
                width: 100
            },
            {
                headerName: '匹数',
                field: 'factoryAllNumber',
                width: 100
            }
        ]
    },
]
const option:any = ref(
    {
        title: {
            text: '织厂WIP',
            /*textVerticalAlign:'center'*/
            top: '2%',
            left: '45%',
        },
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['本集团', '外加工', '汇总'],
            // top: '10%',
            right: '5%',
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            data: ['重量\n计划WIP', '重量\n生产WIP', '重量\n查布WIP', '重量\n修补WIP', '重量\n待入仓WIP', '重量\n库存WIP', '重量\n总WIP'],
        },
        yAxis: {
            type: 'value',
            splitNumber: 2
            // axisLabel: {
            //     formatter: '{value} %'
            // }
        },
        series: [
            {
                name: '本集团',
                type: 'bar',
                // stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 120,],
                barWidth: 50
            },
            {
                name: '外加工',
                type: 'bar',
                // stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310,],
                barWidth: 50
            },
            {
                name: '汇总',
                type: 'line',
                // stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410,],
            },
        ],
    }
)

//初始化
onMounted(async () => {
    const state = states()
    state.setOption(option.value)
    selectJt()
})
const myChart: any = ref()
const states = () => {
    return echarts.init(myChart.value!)
}

function selectJt() {
    get({
        url: 'planSingle/report/getWipRecordByRealTime',
    }).then((res: any) => {
        if (res.code == 200) {
            tableDataList.value[0] = {
                recordDate: '本集团',
                factoryPlanWeight: res.data.groupPlanWeight,
                factoryPlanNumber: res.data.groupPlanNumber,
                factoryProductionWeight: res.data.groupProductionWeight,
                factoryProductionNumber: res.data.groupProductionNumber,
                factoryCheckWeight: res.data.groupCheckWeight,
                factoryCheckNumber: res.data.groupCheckNumber,
                factoryRepairWeight: res.data.groupRepairWeight,
                factoryRepairNumber: res.data.groupRepairNumber,
                factoryWarehouseWeight: res.data.groupWarehouseWeight,
                factoryWarehouseNumber: res.data.groupWarehouseNumber,
                factoryInventoryWeight: res.data.groupInventoryWeight,
                factoryInventoryNumber: res.data.groupInventoryNumber,
                factoryAllWeight: res.data.groupAllWeight,
                factoryAllNumber: res.data.groupAllNumber,
            }
            tableDataList.value[1] = {
                recordDate: '外加工',
                factoryPlanWeight: res.data.externaPlanWeight,
                factoryPlanNumber: res.data.externaPlanNumber,
                factoryProductionWeight: res.data.externaProductionWeight,
                factoryProductionNumber: res.data.externaProductionNumber,
                factoryCheckWeight: res.data.externaCheckWeight,
                factoryCheckNumber: res.data.externaCheckNumber,
                factoryRepairWeight: res.data.externaRepairWeight,
                factoryRepairNumber: res.data.externaRepairNumber,
                factoryWarehouseWeight: res.data.externaWarehouseWeight,
                factoryWarehouseNumber: res.data.externaWarehouseNumber,
                factoryInventoryWeight: res.data.externaInventoryWeight,
                factoryInventoryNumber: res.data.externaInventoryNumber,
                factoryAllWeight: res.data.externaAllWeight,
                factoryAllNumber: res.data.externaAllNumber,
            }
            tableDataList.value[2] = {
                recordDate: '汇总',
                factoryPlanWeight: res.data.factoryPlanWeight,
                factoryPlanNumber: res.data.factoryPlanNumber,
                factoryProductionWeight: res.data.factoryProductionWeight,
                factoryProductionNumber: res.data.factoryProductionNumber,
                factoryCheckWeight: res.data.factoryCheckWeight,
                factoryCheckNumber: res.data.factoryCheckNumber,
                factoryRepairWeight: res.data.factoryRepairWeight,
                factoryRepairNumber: res.data.factoryRepairNumber,
                factoryWarehouseWeight: res.data.factoryWarehouseWeight,
                factoryWarehouseNumber: res.data.factoryWarehouseNumber,
                factoryInventoryWeight: res.data.factoryInventoryWeight,
                factoryInventoryNumber: res.data.factoryInventoryNumber,
                factoryAllWeight: res.data.factoryAllWeight,
                factoryAllNumber: res.data.factoryAllNumber,
            }
            const state = states()
            option.value.series[0].data = [
            tableDataList.value[0].factoryPlanWeight,
            tableDataList.value[0].factoryProductionWeight,
            tableDataList.value[0].factoryCheckWeight,
            tableDataList.value[0].factoryRepairWeight,
            tableDataList.value[0].factoryWarehouseWeight,
            tableDataList.value[0].factoryInventoryWeight,
            tableDataList.value[0].factoryAllWeight,
            ]
            option.value.series[1].data = [
            tableDataList.value[1].factoryPlanWeight,
            tableDataList.value[1].factoryProductionWeight,
            tableDataList.value[1].factoryCheckWeight,
            tableDataList.value[1].factoryRepairWeight,
            tableDataList.value[1].factoryWarehouseWeight,
            tableDataList.value[1].factoryInventoryWeight,
            tableDataList.value[1].factoryAllWeight,
            ]
            option.value.series[2].data = [
            tableDataList.value[2].factoryPlanWeight,
            tableDataList.value[2].factoryProductionWeight,
            tableDataList.value[2].factoryCheckWeight,
            tableDataList.value[2].factoryRepairWeight,
            tableDataList.value[2].factoryWarehouseWeight,
            tableDataList.value[2].factoryInventoryWeight,
            tableDataList.value[2].factoryAllWeight,
            ]
            state.setOption(option.value)
        } else {
            Message.error(res.message)
        }
    })
}

const getList = () => {
    selectJt()
}
</script>
<style scoped>
.contioner {
    height: 100%;
    background: #fff;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.ag-header-group-text) {
    margin: 0 auto;
}

:deep(.ag-header-group-cell) {
    border-right: 1px solid #dde2eb;
}
</style>
    